﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UcDisplayEquipOnMap.ascx.cs" Inherits="TheHeGeo.UserControl.UcDisplayEquipOnMap" %>
<%@ Register Assembly="DevExpress.Web.v14.2, Version=14.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>




<html>
    <head>
        <style>
            #map_canvas {
                height: 800px;
                width: 850px;
            }
        </style>
        <style type="text/css">
    .auto-style2 {
        width: 150px;
    }

    .auto-style4 {
        width: 400px;
    }
</style>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script>
        <script>
            var map;
            var listMarker = [];
            var infowindowG = new google.maps.InfoWindow({
                content: ""
            });
            
            function displayInfoWindow(layer) {
              
                if (layer == 0) {
                    var grid = grlSensor.GetGridView();
                    grid.GetRowValues(grid.GetFocusedRowIndex(), 'MaSensor', OnGetRowValues);
                } 
                else {
                   var grid = grlDuAn.GetGridView();
                    grid.GetRowValues(grid.GetFocusedRowIndex(), 'MaDuAn', OnGetRowValues); 
                }
            }
            function OnGetRowValues(values) {
                for (var i = 0; i < listMarker.length; i++) {
                    if (listMarker[i].id == values) {
                       
                        infowindowG.setContent(listMarker[i].infowindow);
                        infowindowG.open(map, listMarker[i]);

                        map.setCenter(listMarker[i].getPosition());
                        map.setZoom(8);
                    }
                }
            }

            window.onload = function() {
                var currentLayer = CbChoiceLayer.GetSelectedItem().value.toString();
                initialize();
                if (currentLayer == 'sensor') {
                    for (var i = 0; i < listMarker.length; i++) {
                        listMarker[i].setMap(null);
                    }
                    listMarker = [];
                    addSensorMarkers();
                }
                if (currentLayer == 'project') {
                    for (i = 0; i < listMarker.length; i++) {
                        listMarker[i].setMap(null);
                    }
                    listMarker = [];
                    addProjectMarkers();

                }
            };
            function initialize() {
                var mapCanvas = document.getElementById('map_canvas');
                var mapOptions = {
                    center: new google.maps.LatLng(16.436085, 108.587151),
                    zoom: 6,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                map = new google.maps.Map(mapCanvas, mapOptions);
               
                
            }
            function addProjectMarkers() {
                var hidenf = document.getElementById("<%= ProjectList.ClientID %>");
                if (hidenf != null) {
                    var str = hidenf.value;

                    if (str.indexOf("€") > -1) {
                        var listStr = str.split("€");

                        for (var i = 0; i < listStr.length; i++) {
                            if (listStr[i].length > 0) {
                                ProjectMarker(listStr[i]);
                            }
                        }
                    } else {
                        ProjectMarker(str);
                    }
                }
            }

             function addSensorMarkers() {
                var hidenf = document.getElementById("<%= TextSource.ClientID %>");
                if (hidenf != null) {
                    var str = hidenf.value;

                    if (str.indexOf("€") > -1) {
                        var listStr = str.split("€");

                        for (var i = 0; i < listStr.length; i++) {
                            if (listStr[i].length > 0) {
                                SensorMarker(listStr[i]);
                            }
                        }
                    } else {
                        SensorMarker(str);
                    }
                }
            }
            
            function SensorMarker(str) {
                var listEquip = str.split("µ");
                var contenString = "" +
                    "<div id='width800' class='google-infobox-content' >" +
                    "<table>" +
                    "<tr>" +
                    "<td height='320'>" +
                    "<div class='image'>" +
                    "<img src=" + listEquip[8] + " width='300' height='150' >" +
                    "</div>" +
                    "<table border='1' width='300'>" +
                    "<tr>" +
                    "<td><b>Dự án </b></td>" +
                    "<td>" + listEquip[0] + "</td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td><b>Thiết bị</b> </td>" +
                    "<td>" + listEquip[1] + "</td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td> <b>Tên sensor</b> </td>" +
                    "<td>" + listEquip[2] + "</td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td><b>Giá trị </b></td>" +
                    "<td>" + listEquip[3] + "</td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td><b>Thời gian đo</b> </td>" +
                    "<td>" + listEquip[4] + "</td>" +
                    "</tr>" +
                    "</table>" +
                    "<div>" +
                    "<a href=" + "../Equipments/EquipmentMornitoring.aspx?r=" + listEquip[10] + "&n=" + encodeURI(listEquip[2]) + "&d=" + listEquip[9] + " target=\"_blank\">" + 'Biểu đồ' + "</a>" + "    " +
                    "<a href=" + "../Equipments/EquipmentData.aspx?r=" + listEquip[10] + "&n=" + encodeURI(listEquip[2]) + "&d=" + listEquip[9] + " target=\"_blank\">" + 'Dữ liệu' + "</a>" +
                    "</div>" +
                    "</td>" +
                    "</tr>" +
                    "</table>" +
                    "</div>";

               
                var iconBase = 'http://geotechnical.vn:8888/Icon/SensorIcon_n.png';

                var markerImage = new google.maps.MarkerImage(
                    iconBase,
                    new google.maps.Size(16, 16), //size
                    null, //origin
                
                    null, //anchor
                    new google.maps.Size(16, 16) //scale
                );
                var myLatlng = new google.maps.LatLng(listEquip[5], listEquip[6]);
                var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: markerImage });
                marker.set("id", listEquip[10]);
                marker['infowindow'] = contenString;
                listMarker.push(marker);
                google.maps.event.addListener(marker, 'click', function() {

                    var marker1 = this;
                    infowindowG.setContent(contenString);
                    infowindowG.open(map, marker1);
                    grlSensor.SetValue(marker1.id);
                });
                google.maps.event.addListener(map, 'click', function () {
                    infowindowG.close();
                    grlSensor.SetValue(null);
                });
                
                google.maps.event.addListener(map, 'zoom_changed', function() {

                    var pixelSizeAtZoom0 = 16; //the size of the icon at zoom level 0
                    var maxPixelSize = 40; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels

                    var zoom = map.getZoom();
                    if (zoom <= 6) zoom = 0;
                    var relativePixelSize = Math.round(pixelSizeAtZoom0 * Math.pow(2, zoom)); // use 2 to the power of current zoom to calculate relative pixel size.  Base of exponent is 2 because relative size should double every time you zoom in

                    if (relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
                        relativePixelSize = maxPixelSize;

                    //change the size of the icon
                    marker.setIcon(
                        new google.maps.MarkerImage(
                            marker.getIcon().url, //marker's same icon graphic
                            null, //size
                            null, //origin
                            null, //anchor
                            new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
                        )
                    );
                });
            }
            function ProjectMarker(str) {
                var listProject = str.split("µ");
                var lSensor = listProject[5].split("£");
                var vSensor = "";
                for (var i = 0; i < lSensor.length; i++) {
                    if (lSensor[i].length > 0) {
                        
                        var item = lSensor[i].split("§");
                        //vSensor += item[0] + encodeURI(item[1]) + item[2] + encodeURI(item[3]) + item[4] + "<br>";
                        vSensor += item[1] + ": " + item[2] +
                        " <a href=" + "../Equipments/EquipmentMornitoring.aspx?r=" + item[0] + "&n=" + encodeURI(item[1]) + "&d=" + listProject[0] + " target=\"_blank\">" + 'Biểu đồ' + "</a>" + "    " +
                        " <a href=" + "../Equipments/EquipmentData.aspx?r=" + item[0] + "&n=" + encodeURI(item[1]) + "&d=" + listProject[0] + " target=\"_blank\">" + 'Dữ liệu' + "</a> <br>";
                        
                    }
                    
                }
                var contenString = "" +
                    "<div id='width800' class='google-infobox-content' >" +
                    "<table>" +
                    "<tr>" +
                    "<td height='320'>" +
                    "<div class='image'>" +
                    "<img src=" + listProject[4] + " width='350' height='150' >" +
                    "</div>" +
                    "<table border='1' width='350'>" +
                    "<tr>" +
                    "<td><b>Tên dự án </b></td>" +
                    "<td>" + listProject[1] + "</td>" +
                    "</tr>" +
                    "<tr>" +
                    "<td><b>Giá trị các sensor </b></td>" +
                    "<td  height='120'>" + vSensor + "</td>" +
                    "</tr>" +
                    "</table>" +
                    "<div>" +
                    "<table>" +
                    "<tr>" +
                    "<td>" +
                    "<a href=" + '../User/SensorVisualizer.aspx?p=-1&d=' + listProject[0] + " target=\"_blank\">" + 'Chi tiết' + "</a>" +
                    "</td>" +
                    "<td>" +
                    "<a  onclick='" + "ChangeAvatar(" + listProject[0] + ")'> <u><font color='blue'> Thay đổi hình đại diện </u><font> </a>" +
                    "</td>" +
                    "</tr>" +
                    "</table>" +
                    "</div>" +
                    "</td>" +
                    "</tr>" +
                    "</table>" +
                    "</div>";


                var iconBase = 'http://geotechnical.vn:8888/Icon/SensorIcon_n.png';

                var markerImage = new google.maps.MarkerImage(
                    iconBase,
                    new google.maps.Size(16, 16), //size
                    null, //origin
                    null, //anchor
                    new google.maps.Size(16, 16) //scale
                );
                var myLatlng = new google.maps.LatLng(listProject[2], listProject[3]);
                var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: markerImage });
                
                google.maps.event.addListener(marker, 'click', function() {
                    //infowindowS.close();
                    var marker1 = this;
                    infowindowG.setContent(contenString);
                    infowindowG.open(map, marker1);
                    grlDuAn.SetValue(marker1.id);
                });
                google.maps.event.addListener(map, 'click', function () {
                    infowindowG.close();
                    grlDuAn.SetValue(null);
                });
                marker['infowindow'] = contenString;
                marker.set("id", listProject[0]);
                listMarker.push(marker);
                google.maps.event.addListener(map, 'zoom_changed', function() {

                    var pixelSizeAtZoom0 = 16; //the size of the icon at zoom level 0
                    var maxPixelSize = 40; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels

                    var zoom = map.getZoom();
                    if (zoom <= 6) zoom = 0;
                    var relativePixelSize = Math.round(pixelSizeAtZoom0 * Math.pow(2, zoom)); // use 2 to the power of current zoom to calculate relative pixel size.  Base of exponent is 2 because relative size should double every time you zoom in

                    if (relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
                        relativePixelSize = maxPixelSize;

                    //change the size of the icon
                    marker.setIcon(
                        new google.maps.MarkerImage(
                            marker.getIcon().url, //marker's same icon graphic
                            null, //size
                            null, //origin
                            null, //anchor
                            new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
                        )
                    );
                });
            }

            function ChangeAvatar(mDa) {
                document.getElementById("<%= HidenMaDa.ClientID %>").value = mDa;
                PopUpImage.SetHeaderText("Sửa vị trí Sensor");
                PopUpImage.Show();
            }
        </script>
    </head>
    <body>
        <div>
           <table>
               <tr>
                   <td class="auto-style2">
                       <dx:ASPxComboBox BackColor="Beige" ID="CbChoiceLayer" runat="server" ClientInstanceName="CbChoiceLayer" ValueType="System.String" AutoPostBack="True" OnSelectedIndexChanged="CbChoiceLayer_SelectedIndexChanged" >
                <Items>
                    <dx:ListEditItem Value="sensor" Text="Hiển thị sensor" Selected="True" />
                    <dx:ListEditItem Value="project" Text="Hiển thị dự án" />
                </Items>
            </dx:ASPxComboBox>
                   </td>
                   <td class="auto-style4">
                         <dx:ASPxGridLookup ID="grlDuAn" ClientInstanceName="grlDuAn" BackColor="Beige" runat="server" AutoGenerateColumns="False"  TextFormatString="{0}" Width="100%" KeyFieldName="MaDuAn"  IncrementalFilteringDelay="100" Visible="False">
                            <ClientSideEvents ValueChanged="function(s, e) {displayInfoWindow(1);}"></ClientSideEvents>
                             <GridViewProperties>
                                 <Settings ShowFilterRow="True" />
                                <SettingsBehavior AllowFocusedRow="True" AllowSelectSingleRowOnly="True"></SettingsBehavior>
                            </GridViewProperties>
                            <Columns>
                                <dx:GridViewCommandColumn ShowSelectCheckbox="True" VisibleIndex="0">
                                </dx:GridViewCommandColumn>
                                <dx:GridViewDataTextColumn Caption="Dự án" FieldName="TenDuAn" Name="TenDuAn" VisibleIndex="0">
                                    <Settings AutoFilterCondition="Contains" />
                                </dx:GridViewDataTextColumn>
                                <dx:GridViewDataTextColumn Caption="Chú thích" FieldName="ChuThich" Name="ChuThich" VisibleIndex="3">
                                    <Settings AutoFilterCondition="Contains" />
                                </dx:GridViewDataTextColumn>
                                <dx:GridViewDataTextColumn Caption="MaDuAn" FieldName="MaDuAn" Name="MaDuAn" VisibleIndex="4" Visible="False">
                                </dx:GridViewDataTextColumn>
                                <dx:GridViewDataTextColumn Caption="Hạng mục quan trắc" FieldName="HangMucQuanTrac" Name="HangMucQuanTrac" VisibleIndex="2">
                                    <Settings AutoFilterCondition="Contains" />
                                </dx:GridViewDataTextColumn>
                                <dx:GridViewDataTextColumn Caption="Địa điểm" FieldName="DiaDiem" Name="DiaDiem" VisibleIndex="1">
                                    <Settings AutoFilterCondition="Contains" />
                                </dx:GridViewDataTextColumn>
                            </Columns>
                            <ClientSideEvents DropDown="function(s, e) {	s.GetGridView().SetWidth(s.GetWidth());}" Init="function(s, e) {s.GetGridView().SetWidth(s.GetWidth());}" />
                    </dx:ASPxGridLookup>

                     <dx:ASPxGridLookup ID="grlSensor" ClientInstanceName="grlSensor" runat="server" BackColor="Beige" AutoGenerateColumns="False"  TextFormatString="{0}" Width="100%" KeyFieldName="MaSensor"   IncrementalFilteringDelay="100" Visible="True">
                        <ClientSideEvents ValueChanged="function(s, e) {displayInfoWindow(0);}"></ClientSideEvents>
                          <GridViewProperties>
                              <Settings ShowFilterRow="True" />
                            <SettingsBehavior AllowFocusedRow="True" AllowSelectByRowClick="True" ></SettingsBehavior>
                        </GridViewProperties>
                        <Columns>
                            <dx:GridViewCommandColumn ShowSelectCheckbox="True" VisibleIndex="0">
                            </dx:GridViewCommandColumn>
                            <dx:GridViewDataTextColumn Caption="Sensor" FieldName="TenSensor" Name="TenSensor" VisibleIndex="0">
                                <Settings AutoFilterCondition="Contains" />
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="MaSensor" FieldName="MaSensor" Name="MaSensor" VisibleIndex="2" Visible="False">
                                <Settings AutoFilterCondition="Contains" />
                             </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn Caption="Mô tả" FieldName="MoTa" Name="MoTa" VisibleIndex="1">
                           <Settings AutoFilterCondition="Contains" />
                            </dx:GridViewDataTextColumn>
                        </Columns>
                        <ClientSideEvents DropDown="function(s, e) {	s.GetGridView().SetWidth(s.GetWidth());}" Init="function(s, e) {s.GetGridView().SetWidth(s.GetWidth());}" />
                    </dx:ASPxGridLookup>
                   </td>
                   <td></td>
               </tr>
           </table>
             

        </div>
        <div id="map_canvas">
        </div>
        <div>
            <asp:hiddenfield ID="TextSource"  runat="server" value="sdfsdafsd">  
            </asp:hiddenfield>
            <asp:hiddenfield ID="ProjectList"  runat="server" value="sdfsdafsd">  
            </asp:hiddenfield>
            <asp:hiddenfield ID="HidenMaDa"  runat="server" value="0">  
            </asp:hiddenfield>
        </div>
        <dx:ASPxPopupControl ID="PopUpImage" ClientInstanceName="PopUpImage" runat="server" CloseAction="CloseButton" HeaderText="Upload ảnh đại diện" Height="146px" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" Width="686px">
            <ContentCollection>
                <dx:PopupControlContentControl runat="server" SupportsDisabledAttribute="True">
                    <table style="width: 100%;">
                        <tr>
                            <td colspan="2">
                                <asp:FileUpload ID="FileUpload1" runat="server" accept="image/*" multiple="false" Visible="True" Width="651px" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="Chú thich">
                                </dx:ASPxLabel>
                            </td>
                            <td>
                                <dx:ASPxMemo ID="txtChuThich" runat="server" Height="71px" Width="600px">
                                </dx:ASPxMemo>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>
                                <asp:Button ID="btpopOk" runat="server"  Text="Đồng ý" OnClick="btpopOk_Click" />
                            </td>
                        </tr>
                        <tr>
                            
                            <td colspan="2">
                                <asp:Label ID="ErroLbel" runat="server" />
                            </td>
                        </tr>
                    </table>
                </dx:PopupControlContentControl>
            </ContentCollection>
        </dx:ASPxPopupControl>
    </body>
</html>